<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
  <TITLE>Diff, Match and Patch: Demo of Match</TITLE>
  <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="../javascript/diff_match_patch.js"></SCRIPT>
</HEAD>

<BODY>
<H1>Diff, Match and Patch</H1>
<H2>Demo of Match</H2>

<P>Match looks for a pattern within a larger text.
This implementation of match is fuzzy, meaning it can find a match even if the
pattern contains errors and doesn't exactly match what is found in the text.
This implementation also accepts an expected location, near which the match should be found.
The candidate matches are scored based on a) the number of spelling differences between the 
pattern and the text and b) the distance between the candidate match and the expected location.
The match distance parameter sets the relative importance of these two metrics.</P>

<FORM action="#" onsubmit="return false">
<H3>Text:</H3>
<TEXTAREA ID="text" STYLE="width: 100%" ROWS=10 onChange="textchange()">'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe.
All mimsy were the borogroves,
And the mome raths outgrabe.</TEXTAREA>

<H3>Fuzzy pattern:</H3>
<P><INPUT ID="pattern" SIZE=32 VALUE="slimy tools"> <SPAN ID="maxlengthspan"></SPAN><BR>
Aproximate pattern to search for in the text.  Due to limitations of the Bitap algorithm, the pattern has a limited length.</P>

<H3>Fuzzy location:</H3>
<P><INPUT ID="loc" SIZE=4 MAXLENGTH=10 VALUE="30"> <SPAN ID="maxtextspan"></SPAN><BR>
Aproximately where in the text is the pattern expected to be found?</P>

<H3>Match distance:</H3>
<P><INPUT TYPE="text" SIZE=3 MAXLENGTH=8 VALUE="1000" ID="distance"><BR>
Determines how close the match must be to the fuzzy location (specified above).  An exact letter match which is 'distance' characters away from the fuzzy location would
score as a complete mismatch.  A distance of '0' requires the match be at the exact location specified, a threshold of '1000'
would require a perfect match to be within 800 characters of the fuzzy location to be found using a 0.8 threshold.</P>

<H3>Match threshold:</H3>
<P><INPUT TYPE="text" SIZE=3 MAXLENGTH=5 VALUE="0.8" ID="threshold"><BR>
At what point does the match algorithm give up.  A threshold of '0.0' requires a perfect match (of both letters and location), a threshold of '1.0' would match anything.</P>

<INPUT TYPE="button" onClick="launch()" VALUE="Compute Match">
</FORM>

<DIV ID="outputdiv"></DIV>

<DIV ID="datediv"></DIV>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
var dmp = new diff_match_patch();

function launch() {
  var text = document.getElementById('text').value;
  var pattern = document.getElementById('pattern').value;
  var loc = parseInt(document.getElementById('loc').value, 10);

  dmp.Match_Distance = parseFloat(document.getElementById('distance').value);
  dmp.Match_Threshold = parseFloat(document.getElementById('threshold').value);

  var ms_start = (new Date()).getTime();
  var match = dmp.match_main(text, pattern, loc);
  var ms_end = (new Date()).getTime();

  document.getElementById('datediv').innerHTML = 'Time: ' + (ms_end - ms_start) / 1000  + 's';
  if (match == -1) {
    document.getElementById('outputdiv').innerHTML = 'No match found.';
  } else {
    var quote = text.substring(match, match + pattern.length);
    quote = quote.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    quote = quote.replace(/\n/g, '&para;');
    document.getElementById('outputdiv').innerHTML = 'Match found at character ' + match +
        ': &nbsp; <CODE>' + quote + '</' + 'CODE>';
  }
}

function textchange() {
  document.getElementById('maxtextspan').innerHTML = '(text is currently ' + document.getElementById('text').value.length + ' characters long)';
}

textchange();
document.getElementById('pattern').maxLength = dmp.Match_MaxBits;
document.getElementById('maxlengthspan').innerHTML = '(maxlength in this browser: ' + dmp.Match_MaxBits + ')';
</SCRIPT>

<HR>
Back to <A HREF="http://code.google.com/p/google-diff-match-patch/">Diff, Match and Patch</A>

</BODY>
</HTML>
